﻿<%@ Page Title="" Language="C#" MasterPageFile="~/ext.Master" AutoEventWireup="true" CodeBehind="Ext.Grid3.aspx.cs" Inherits="Demo.Grid.Ext_Grid3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="/extjs/ux/data/PagingMemoryProxy.js"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            var grid = Ext.create('Ext.grid.Panel', {
                renderTo: 'dynamicGrid',
                height: 200,
                width: 600,
                //store: store,
                columns: [
                    {
                        xtype: 'rownumberer',
                        width: 40,
                        resizable: true,
                        sortable: false
                    },
                    {
                        text: '物料编码',
                        flex: 1,
                        sortable: false,
                        dataIndex: '物料编码'
                    },
                    {
                        text: '物料名称',
                        flex: 1,
                        sortable: false,
                        dataIndex: '物料名称'
                    }
                ]

            });

            Ext.Ajax.request({
                url: "/common/GetPageData.ashx",
                success: function (response, config) {
                    //解析返回的Json字符串，得到JSON对象
                    json = Ext.decode(response.responseText);
                    //定义store 
                    var store = Ext.create('Ext.data.Store', {
                        pageSize: 5,
                        //buffered: true,
                        listeners: {
                            //load: function () { alert('load') }
                            datachanged: function () {
                                grid.selModel.select(4);
                            }
                        },
                        proxy: new Ext.data.PagingMemoryProxy(),
                        //type:'',
                        fields: ['物料ID', '物料名称', '物料编码', '物料分类ID'],
                        data: json.Data
                    });
                    store.load();
                    //重新配置grid的store对象
                    grid.reconfigure(store);
                    grid.addDocked({
                        xtype: 'pagingtoolbar',
                        dock: 'bottom',
                        listeners: {
                            change: function (pagingToolbar, pageData, opts) {
                                //alert("paging tool bar change event");
                                //grid.selModel.select(3);
                            }
                        },
                        store: store
                    });
                    store.load({ params: { start: 0, limit: 5 } });
                },
                failure: function () {
                    alert("error");
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="dynamicGrid"></div>
</asp:Content>
